<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/css/navbar.css}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" th:href="@{/css/individual.css}">
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg">
    <div class="container">
        <a class="navbar-brand" href="#">云学堂</a>
        <div class="collapse navbar-collapse">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a class="nav-link" th:href="@{/resource/list}">学习资源</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" th:href="@{/assignment/list}">作业与考试</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" th:href="@{/forum/list}">交流互动</a>
                </li>
                <li class="nav-item" th:if="${session.identity=='superAdmin' || session.identity=='ordinaryAdmin'}">
                    <a class="nav-link" th:href="@{/admin/index}">管理中心</a>
                </li>
            </ul>
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link active" th:href="@{/user/digital}">个人中心</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" th:href="@{/user/logout}">退出</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div class="container">
    <div class="profile-container">
        <div class="profile-header">
            <h1><i class="fas fa-user-circle me-2"></i>个人信息</h1>
        </div>

        <div class="profile-content">
            <!-- 头像显示 -->
            <div style="text-align: center; margin-bottom: 30px;">
                <img th:if="${currentUser.avatar != null and currentUser.avatar != ''}"
                     th:src="${currentUser.avatar}"
                     alt="用户头像"
                     class="avatar">
                <img th:if="${currentUser.avatar == null || currentUser.avatar == ''}"
                     th:src="@{/img/defaultAvatar.png}"
                     alt="默认头像"
                     class="avatar">
                
            </div>

            <!-- 用户信息 -->
            <div class="profile-info">
                <span id="userId" style="display: none" th:value="${currentUser.id}"></span>
                <div class="info-label">用户名:</div>
                <div class="info-value" th:text="${currentUser.username}">用户名</div>

                <div class="info-label">性别:</div>
                <div class="info-value">
                    <span th:if="${currentUser.gender == 1}" class="gender-male">男</span>
                    <span th:if="${currentUser.gender == 0}" class="gender-female">女</span>
                </div>

                <div class="info-label">手机号:</div>
                <div class="info-value" id="phoneDisplay" th:text="${currentUser.phone}">手机号</div>

            </div>

            <!-- 编辑按钮 -->
            <div class="d-flex justify-content-center mt-4">
                <button id="editProfileBtn" class="btn btn-primary">
                    <i class="fas fa-edit me-1"></i>编辑信息
                </button>
            </div>

            <!-- 历史记录 -->
            <div class="d-flex justify-content-center gap-3 mt-4">
                <a th:href="@{'/user/history/views/'+${currentUser.id}}" class="btn btn-info">
                    <i class="fas fa-history me-1"></i>浏览记录
                </a>
                <a th:href="@{'/user/history/downloads/'+${currentUser.id}}" class="btn btn-info">
                    <i class="fas fa-download me-1"></i>下载记录
                </a>
            </div>
        </div>
        <div class="footer">
            <p>© 2023 云学堂 | 让知识触手可及</p>
        </div>
    </div>
</div>

<!-- 编辑个人信息模态框 -->
<div class="modal fade" id="editProfileModal" tabindex="-1" aria-labelledby="editProfileModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editProfileModalLabel">编辑个人信息</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="editProfileForm">
                    <!-- 头像上传 -->
                    <div class="mb-3">
                        <label class="form-label">头像</label>
                        <input type="file" class="form-control" id="avatarFile" accept="image/*">
                        <img id="avatarPreview" src="#" alt="头像预览" style="display: none; width: 100px; height: 100px; margin-top: 10px; border-radius: 50%;">
                    </div>
                    
                    <!-- 性别选择 -->
                    <div class="mb-3">
                        <label class="form-label">性别</label>
                        <div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="gender" id="editGenderMale" value="1">
                                <label class="form-check-label" for="editGenderMale">男</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="gender" id="editGenderFemale" value="0">
                                <label class="form-check-label" for="editGenderFemale">女</label>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 手机号 -->
                    <div class="mb-3">
                        <label for="editPhone" class="form-label">手机号</label>
                        <input type="tel" class="form-control" id="editPhone" th:value="${currentUser.phone}">
                    </div>
                    
                    <!-- 密码修改 -->
                    <div class="mb-3">
                        <label class="form-label">修改密码</label>
                        <input type="password" class="form-control mb-2" id="oldPassword" placeholder="原密码">
                        <input type="password" class="form-control mb-2" id="newPassword" placeholder="新密码">
                        <input type="password" class="form-control" id="confirmPassword" placeholder="确认新密码">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="saveProfileBtn">保存</button>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script th:src="@{/js/individual.js}"></script>
</body>
</html>